<template>
	<ge-page id="ge-page">
		<home v-if="active === 'home'" />
		<my v-if="active === 'my'" />
		<view :class="[uiStyle+'-row-complaint']">
			<van-tabbar :active="active" fixed @change="changeTabbar" :placeholder="true"
			:active-color="tabBar.selectedColor" :inactive-color="tabBar.color">
			<view v-for="(item, index) in tabBar.list" :key="index" class="custom-tabbar-item">
				<van-tabbar-item :icon="active === item.name ? item.selectedIconPath : item.iconPath" :name="item.name">
					{{item.text}}
				</van-tabbar-item>
			</view>
		</van-tabbar>
		</view>
	</ge-page>
</template>

<script>
	import home from '@/pages/home/home.vue'
	import my from '@/pages/my/my.vue'
	export default {
		components: {
			home,
			my
		},
		data() {
			return {
				active: 'home',
				uiStyle:true,
				"tabBar": {
					"color": "#7A7E83",
					"selectedColor": "black",
					"borderStyle": "black",
					"backgroundColor": "#ffffff",
					"list": [{
						"pagePath": "pages/home/home",
						"iconPath": "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20-1.png",
						"selectedIconPath": "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20.png",
						"text": "首页",
						"name": "home"
					}, {
						"pagePath": "pages/my/my",
						"iconPath": "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21.png",
						"selectedIconPath": "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21-1.png",
						"text": "我的待办",
						"name": "my"
					}]
				},
			}
		},
		watch(){
		},
		created() {
			//适老化uiStyle为true正常模式 fase为老年化模式
			// console.log(uni.getStorageSync('uiStyle'))
			this.uiStyle = uni.getStorageSync('uiStyle')
			console.log(uni.getStorageSync('uiStyle'),'xiaohe')
		},
		methods: {
			changeTabbar(e) {
				this.active = e.detail
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .van-tabbar--fixed {
		position: fixed;
	}

	.custom-tabbar-item {
		flex: 1;
	}

	::v-deep .van-tabbar-item {
		align-items: center;
		color: var(--tabbar-item-text-color, #646566);
		display: flex;
		flex-direction: column;
		// font-size: var(--tabbar-item-font-size, 12px);
		height: 100%;
		justify-content: center;
		line-height: var(--tabbar-item-line-height, 1);
	}
	.elder-row-complaint {
		::v-deep .van-tabbar-item{
		font-size: var(--tabbar-item-font-size, 1rem);
	}
	}
	.normal-row-complaint {
		::v-deep .van-tabbar-item{
		font-size: var(--tabbar-item-font-size, 12px);
	 }
	}
</style>
